<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交载荷</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>
<body>
    <div id="app">
        <p>{{count}}</p> 
        <button @click="btnClick">增加</button>
    </div>

    <script>
        const store = new Vuex.Store({
            state:{
                count:0
            },
            mutations:{
                // payload 载荷 就是increment中传入的第二个形式参数
                increment(state,obj){
                    console.log(obj);
                    store.state.count+=obj.step;
                }
            }
        })

        var app = new Vue({
            el:"#app",
            // 将全局的store对象注入根组件app中，以后所有子组件都可以访问
            store:store,
            computed:{
                count(){
                    return this.$store.state.count;
                }
            },
            methods:{
                btnClick(){
                    // 去调用store中的commit方法 调用increment  实参是调用时传入 多个参数用对象
                    // this.$store.commit("increment",{step:200,name:"123"});

                    // 使用对象的风格方式提交
                    this.$store.commit({
                        type:"increment",
                        step:10,
                        name:"112"
                    })
                }
            }
        })



    </script>


</body>
</html>